<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">系统管理</span>
			<span class="h2">系统管理</span>
		</div>
		<div class="con">
			<div class="search clearfix" style="margin-top: 10px;">
				<el-button type="primary" @click="addust()">新建操作员</el-button>
				<el-button type="primary" @click="addrol()">新建角色</el-button>
				<div class="right-search1">
					<el-input v-model="input1" placeholder="请输入..."></el-input>
					<el-button  type="primary" @click="searcj()" style="margin-left: 10px;">查看</el-button>
				</div>
			</div>
			<div style="margin-top: 10px;padding-bottom: 100px;overflow: auto">
				<el-table ref="tableData" :data="tableData" highlight-current-row style="width: 100%">
					<el-table-column type="index" width="60">
					</el-table-column>
					<el-table-column prop="Login" label="用户名">
					</el-table-column>
					<el-table-column prop="CNName" label="姓名">
					</el-table-column>
					<el-table-column prop="Tel" label="电话">
					</el-table-column>
					<el-table-column prop="StatusStr" label="状态">
					</el-table-column>
					<el-table-column prop="address" label="操作" width="230">
						<template slot-scope="scope">
							<el-dropdown trigger="click">
								<span class="el-dropdown-link"><el-button type="primary">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button></span>
								<el-dropdown-menu slot="dropdown" class="div">
									<el-dropdown-item>
										<el-button size="small" type="primary" @click="modify(scope.row.ID,scope.row.Login,scope.row.CNName,scope.row.Tel,scope.row.HeadIMG,)">修改</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button size="small"  type="danger" @click="deleteRow(scope.row.Login)">删除</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button size="small" type="info" @click="fnReset(scope.row.Login)">重置</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button size="small" type="primary" @click.native.prevent="setrole(scope.row.Login)">权限</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination small :current-page="index" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background prev-text='上一页' next-text='下一页'>
					</el-pagination>
				</div>
			</div>
		</div>
		
		<!--新建操作员-->
		<el-dialog title="操作员管理" :visible.sync="dialogVisible">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.pass" type="password"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.tel"></el-input>
				</el-form-item>
			</el-form>
			<div  class="uploadImg">
				<el-upload style="text-align: center;"
				  class="upload-demo"
				  ref="upload"
				  :action="host"
				  :limit="limitnum"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="fileList"
				  :onError="uploadError"
				  :on-change="handleChange"
				  :onSuccess="uploadSuccess"
				  :auto-upload="false">
				  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
				  <img :src="imgUrl" class="bannerimg2" v-if="imgUrl"/>
				</el-upload>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="newUere()">确 定</el-button>
			</span>
		</el-dialog>
		<!--修改操作员-->
		<el-dialog title="修改操作员" :visible.sync="mark5" width="30%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名">
					<el-input v-model="form.username" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.tel"></el-input>
				</el-form-item>
				<div  class="uploadImg">
					<el-upload style="text-align: center;"
					  class="upload-demo"
					  ref="upload"
					  :action="host"
					  :limit="limitnum"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :file-list="fileList"
					  :onError="uploadError"
					  :on-change="handleChange"
					  :onSuccess="uploadSuccess"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
					  <img :src="imgUrl" class="bannerimg2" v-if="imgUrl"/>
					</el-upload>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="updateuser()">确 定</el-button>
			</span>
		</el-dialog>
		
		<!--新建角色-->
		<el-dialog title="新建角色" :visible.sync="Mark2">
			<el-row :gutter="20">
				<el-col :span="4" style="text-align: center; line-height: 36px;"><span>角色名：</span></el-col>
				<el-col :span="15">
					<el-input v-model="role" placeholder="请输入内容"></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addRole()">添加</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="7">
					<div class="qxleft">
						<h3 class="rowl">角色</h3>
						<div style="height: 300px;overflow:auto;" id="jiaose">
							<button type="button" class="list-group-item" :value="item.ID" ref="name" v-for="(item,index) in roleList" @click="fnJur(item.ID)">{{item.RoleName}}</button>
						</div>
					</div>
				</el-col>
				<el-col :span="16" style="overflow: auto; height: 341px;">
					<div class="panel">
						<div class="qxtop">
							<h3 style="float: left;">权限配置</h3>
							<el-button type="danger" style="float: right;" @click="delUse()">删除</el-button>
						</div>
						<div class="qxtype">
							<div v-for="items in authlist">
								<div class="qxtype-title">{{items.GroupName}}</div>
								<div>
									<div class="checkbox c-checkbox needsclick">
										<el-checkbox-group v-model="item.isExists" v-for="item in items.ItemList" :key="item.id" class="divlist">
											<el-checkbox :label="item.ID" name="check" :value="item.ID" :checked="item.isExists">{{item.ItemName}}</el-checkbox>
										</el-checkbox-group>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="autl()">确 定</el-button>
			</span>
		</el-dialog>
		<!--重置密码-->
		<el-dialog title="重置密码" :visible.sync="Mark3" :before-close="handleClose">
			<el-form ref="formInline" :model="formInline" label-width="100px">
				<el-form-item label="新密码：">
					<el-input v-model="formInline.pwd" type="password" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="密码确认：">
					<el-input v-model="formInline.oldpwd" type="password" placeholder=""></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="ModiPwd()">确 定</el-button>
			</span>
		</el-dialog>
		<!--权限配置-->
		<el-dialog title="权限配置" :visible.sync="mark4" :before-close="handleClose">
			<el-form ref="qxpz" :model="qxpz" label-width="100px">
				<el-form-item label="操作员：">
					<el-input v-model="qxpz.login" placeholder="" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div class="qxpzbox">
				<p class="qx-title">角色</p>
				<div>
					<p class="qx-title" v-for="item in roleList">
						<el-checkbox-group v-model="item.isExsits">
							<el-checkbox :label="item.ID" name="row" :value="item.ID" :checked="item.isExsits">{{item.RoleName}}</el-checkbox>
						</el-checkbox-group>
					</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="fnSubRole()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import api from '../../../api/api'
	export default {
		name: 'system',
		data() {
			return {
				index:1,
				limitnum:1,
				headImg:'',
				imgUrl:'',//小图
				host:"",//上传地址
				fileList:[],
				host:"",
				ExtDics: [], //业务员列表
				sales: "", //业务员
				usetype: false, //隐藏业务员
				loading: true,
				input1: "",
				mark5: false,
				qxlist: [],
				qxpz: {
					login: ""
				},
				mark4: false,
				formInline: { //密码
					pwd: '',
					oldpwd: ''
				},
				Mark3: false,
				authlist: [],
				roleList: [],
				role: "",//添加角色
				Mark2: false,
				radio: '1',
				total: 1,
				form: {
					name: '',
					tel: '',
					username: "",
					pass:'',
				},
				tableData: [],//用户列表
				dialogVisible: false,
				login: "", //登入名
				id: "", //id
				type: "", //类型
				stadu: "", //状态
				pageindex:0,
			}
		},
		created() {
			this.host = api.files
			this.getuserlist()
		},
		updated: function() {
			this.$nextTick(function() {
				//点击添加样式
				var list = document.getElementsByClassName("list-group-item");
				for(var i = 0; i < list.length; i++) {
					list[i].onclick = function() {
						for(var j = 0; j < list.length; j++) {
							list[j].className = "list-group-item"
						}
						this.className = "list-group-item act"
					}
				};
			});
		},
		methods: {
			//查找
			searcj(){
				this.index = 1
				this.getuserlist()
			},
			//翻页
			handleCurrentChange(val){
				this.loading = true
				this.index = val
		    	this.$axios.post(api.getuserlist,{
					"Para": this.input1,
					"PageSize": 10,
					"PageIndex": this.index - 1,
					"OrderbyString": "Login"
				}).then(res=>{
					if(res.data.isOK){
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items?res.data.data.Items:1
						this.loading = false
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}	
				})
			},
			submitUpload() {
				this.host = api.files
		        this.$refs.upload.submit();
		    },
		    uploadSuccess(response, file, fileList){
		    	this.$message({
					message: '上传成功',
					type: 'success'
				});
		    	this.headImg = response.data.filePaht.substring(2, response.data.filePaht.length)
		    },
		    uploadError (response, file, fileList){
		    },
		    handleRemove(file, fileList) {
		    },
		    handlePreview(file) {
		    },
		    handleChange(file, fileList){
		    	this.imgUrl = file.url
		    },
			handleClose(){
				this.quxia()
			},
		    //新建操作员
		    addust(){
		    	this.form.username = "";
				this.form.pass = "";
				this.form.name = "";
				this.form.tel = "";
				this.form.pwd = ""
		    	this.dialogVisible = true
		    },
		    //关闭弹框
		    quxia(){
		    	this.dialogVisible = false	
		    	this.mark5 = false
		    	this.Mark2 = false
		    	this.Mark3 = false
		    	this.mark4 = false
		    },
		    //提交新建操作员
		    newUere(){
		    	this.loading = true
		    	this.$axios.post(api.adduser,{
				  "Login": this.form.username,
				  "CNName": this.form.name,
				  "Pwd": md5(this.form.pass),
				  "Tel": this.form.tel,
				  "openID": "",
				  "HeadIMG": this.headImg,
				  "Memo": ""
				}).then(res=>{
					if(res.data.isOK){
						this.loading = false
						this.$message({
							message: '创建成功',
							type: 'success'
						});
						this.loading = false
						this.setrole(this.form.username)
						this.getuserlist();
						this.dialogVisible = false;	
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
		    	
		    },
		    //修改弹框
		    modify(id,Login,CNName,tel,HeadIMG){
		    	this.id = id
		    	this.form.name = CNName
		    	this.form.username = Login
		    	this.form.tel = tel
		    	this.imgUrl = api.host + HeadIMG
		    	this.headImg = HeadIMG
		    	this.mark5 = true
		    },
		    //修改提交
		    updateuser(){
		    	this.loading = true
		    	this.$axios.post(api.updateuser,{
				  "ID": this.id,
				  "Login": this.form.username,
				  "CNName": this.form.name,
				  "Tel": this.form.tel,
				  "HeadIMG":this.headImg,
				}).then(res=>{
					if(res.data.isOK){
						this.getuserlist()
						this.loading = false
						this.mark5 = false
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
		    },
		    //新建角色弹框
		    addrol(){
		    	this.role = ''
		    	this.Mark2 = true
		    	this.userroles()
		    },
		    //提交新建角色权限配置
		    autl(){
		    	this.loading = true
				var id = this.id
				var me = this
				var RoleIDList = new Array();
				$('input[name="check"]:checked').each(function() {
					RoleIDList.push($(this).val()); //向数组中添加元素  
				});
				this.$axios.post(api.setauth, {
					"RoleID": id,
					"AuthIDList": RoleIDList
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						res.data.data = res.data.data ? res.data.data : [{}]
						me.authlist = res.data.data
						this.Mark2 = false;

					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
		    },
		    //提交添加角色
		    addRole(){
		    	this.loading = true
		    	this.$axios.post(api.addrole,{
				  "ID": "",
				  "RoleName": this.role,
				  "Memo": "",
				  "CreateMan": "",
				  "CreateDate": ""
				}).then(res=>{
					if(res.data.isOK){
						this.loading = false
						this.$message({
							message: '新建成功',
							type: 'success'
						});
						this.userroles()
						this.role = ""
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}	
				})
		    },
		    //获取角色列表
		    userroles(){
		    	this.loading = true
				var me = this
				var login = sessionStorage.login
				this.$axios.get(api.userroles + "/" + login).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						res.data.data.RoleList = res.data.data.Roles ? res.data.data.Roles : [{}]
						this.roleList = res.data.data.RoleList
						setTimeout(function() {
							$("#jiaose button").eq(0).addClass("act").siblings().removeClass("act")
							this.id = $("#jiaose button").eq(0).val()
							if(this.id){
								me.fnJur(this.id)
							}
						}, 0)
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
		    },
		    //点击角色显示权限列表
			fnJur(id) {
				this.loading = true
				var me = this
				this.id = id
				this.$axios.get(api.authlist + '/' + id).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						res.data.data = res.data.data ? res.data.data : [{}]
						me.authlist = res.data.data
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//删除角色
			delUse() {
				if(this.roleList.length>0){
					this.loading = true
					this.$axios.get(api.delrole + '/' + this.id, {
						headers: {
							token: sessionStorage.token
						}
					}, ).then((res) => {
						if(res.data.isOK) {
							this.loading = false
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.userroles()
							if(this.roleList.length==1){
								this.authlist=[]
							}
						} else {
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/admin'
								})
							} else {
								this.loading = false
								this.$message.error(res.data.msg);
							}
						}
					});
				}
			},
		    //删除操作员
		    deleteRow(login){
		    	this.loading = true;
				this.$axios.get(api.deluser + '/' + login).then((res) => {
					if(res.data.isOK) {
						this.loading = false;
						this.getuserlist()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
		    },
		    //重置弹框
		    fnReset(login){
		    	this.login = login
		    	this.Mark3 = true
		    },
		    //确定修改
		    ModiPwd(){
		    	this.loading = true
				if(this.formInline.oldpwd == this.formInline.pwd && this.formInline.oldpwd != null) {
					this.$axios.post(api.changepwd, {
						"Login": this.login,
						"NewPwd": md5(this.formInline.oldpwd),
						"OldPwd": "",
						"ValidOld": false
					}).then((res) => {
						if(res.data.isOK) {
							this.loading = false
							this.$message({
								message: '修改成功',
								type: 'success'
							});
							this.getuserlist();
							this.Mark3 = false;
							this.formInline.oldpwd = "";
							this.formInline.pwd = "";
						} else {
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/admin'
								})
							} else {
								this.loading = false
								this.$message.error(res.data.msg);
							}
						}
					});
				} else {
					this.loading = false
					this.$message.error("两次密码输入不一样");
					this.Mark3 = true;
				}

		    },
		    //权限弹框
		    setrole(nanm){
		    	this.qxpz.login = nanm;
				this.userrolesass();
				this.mark4 = true
		    },
		    //获取角色列表2
			userrolesass() {
				this.loading = true
				var me = this
				var login = this.qxpz.login
				this.$axios.get(api.userroles + "/" + login).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.roleList = res.data.data.Roles ? res.data.data.Roles : [{}]
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
		    //提交权限配置
		    fnSubRole(){
				this.loading = true
				var RoleIDList = new Array();
				$('input[name="row"]:checked').each(function() {
					RoleIDList.push(($(this).val() - 0)); //向数组中添加元素  
				});
				this.$axios.post(api.setrole, {
					"Login": this.qxpz.login,
					"RoleIds": RoleIDList
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.userrolesass();
						this.mark4 = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
		    },
		    //获取操作员列表
		    getuserlist(){
		    	this.loading = true
		    	this.$axios.post(api.getuserlist,{
					"Para": this.input1,
					"PageSize": 10,
					"PageIndex": this.index-1,
					"OrderbyString": "Login"
				}).then(res=>{
					if(res.data.isOK){
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items?res.data.data.Items:1
						this.loading = false
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}	
				})
		    }
		}
	}
</script>

<style scoped>
	
	.con {
		width: 100%;
		box-sizing: border-box;
	}
	
	.search {
		height: auto;
		width: 100%;
		/*border: 1px solid #000;*/
	}
	
	.search button {
		margin: 10px;
	}
	
	.page {
		float: right;
		margin-top: 20px;
	}
	
	.el-dropdown-menu__item {
		text-align: center;
	}
	
	.el-dropdown-menu {
		min-width: 79px !important;
	}
	
	.rowl {
		color: #fff;
		background-color: #5d9cec;
		border-color: #cfdbe2;
		padding: 10px 0;
		text-indent: 15px;
	}
	
	.list-group-item {
		position: relative;
		display: block;
		padding: 10px 0px;
		text-align: left;
		text-indent: 15px;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid #e4eaec;
		width: 100%;
		cursor: pointer;
	}
	
	.qxleft {
		border: 1px solid #cfdbe2;
	}
	
	.panel {
		border: 1px solid #cfdbe2;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.qxtop {
		height: 36px;
		line-height: 36px;
		margin-bottom: 15px;
	}
	
	.qxtype {
		border: 1px solid #cfdbe2;
		border-color: #cfdbe2;
		border-top-width: 3px;
		margin-bottom: 21px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		padding: 10px;
	}
	
	.qxtype-title {
		color: #444;
		background-color: #fff;
		border-color: #cfdbe2;
		border-bottom: 0;
		font-size: 14px;
		padding: 10px 15px;
		border-bottom: 1px solid transparent;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
	}
	
	.qxtype>div {
		padding: 15px;
		margin-bottom: 21px;
		background-color: #fff;
		border: 1px solid transparent;
		border-radius: 4px;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		border-top-width: 3px;
		border-color: #cfdbe2;
	}
	
	.el-dialog__footer {
		text-align: center;
	}
	
	.act {
		background-color: #B9C4D1!important;
	}
	
	.qxpzbox {
		max-height: 240px;
		overflow: auto;
		border: 1px solid #cfdbe2;
		border-top-width: 3px;
		border-color: #cfdbe2;
		margin-bottom: 21px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		padding: 15px;
	}
	
	.qx-title {
		margin-bottom: 15px;
	}
	
	.check {
		vertical-align: middle;
		margin-right: 5px;
		width: 15px;
		height: 15px;
	}
	
	.uploadImg{
		text-align: center;
	}
	.uploadImg img{
		margin-top: 10px;
		width: 80px;
		font-size: 0;
	}
	.bannerimg2{
		display: block;
		width: 40px;
		margin: auto;
		margin-top: 20px;
	}
</style>